<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>多列表格</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2047603_mvshpgq6dqk.css">
  <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.0.3/dist/antd.min.css">
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <script src="../js/moment.min.js"></script>
  <script src="../js/antd.min.js"></script>
  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">
    function Download(props) {
      return (
        <button></button>
      )
    }
    const dataSource = [
      { key: '1', name: '材料', categories1: '家具', categories1bchild: '室内家具', categories2: '特殊家具', categories2bchild: '室内特殊家具', },
      { key: '2', name: '材料', categories1: '家具', categories1bchild: '室外家具', categories2: '特殊家具', categories2bchild: '室外特殊家具', },
      { key: '3', name: '材料', categories1: '家具', categories1bchild: '合成家具', categories2: '特殊家具', categories2bchild: '合成特殊家具', },
      { key: '4', name: '材料', categories1: '建材', categories1bchild: '室内建材', categories2: '特殊建材', categories2bchild: '室内特殊建材', },
      { key: '5', name: '材料', categories1: '建材', categories1bchild: '室外建材', categories2: '特殊建材', categories2bchild: '室外特殊建材', },
      { key: '6', name: '材料', categories1: '建材', categories1bchild: '合成建材', categories2: '特殊建材', categories2bchild: '合成特殊建材', },
      { key: '7', name: '材料', categories1: '外墙', categories1bchild: '室内外墙', categories2: '特殊外墙', categories2bchild: '室内特殊外墙', },
      { key: '8', name: '材料', categories1: '外墙', categories1bchild: '室外外墙', categories2: '特殊外墙', categories2bchild: '室外特殊外墙', },
      { key: '9', name: '材料', categories1: '外墙', categories1bchild: '合成外墙', categories2: '特殊外墙', categories2bchild: '合成特殊外墙', },
    ];
    let len = dataSource.length
    const columns = [
      {
        title: '属性', dataIndex: 'name', render: (value, row, index) => {
          const obj = { children: value, props: {}, };

          if (index === 0) { obj.props.rowSpan = 9; }
          if (index === 1) { obj.props.rowSpan = 0; }
          if (index === 2) { obj.props.rowSpan = 0; }

          if (index === 3) { obj.props.rowSpan = 0; }
          if (index === 4) { obj.props.rowSpan = 0; }
          if (index === 5) { obj.props.rowSpan = 0; }

          if (index === 6) { obj.props.rowSpan = 0; }
          if (index === 7) { obj.props.rowSpan = 0; }
          if (index === 8) { obj.props.rowSpan = 0; }
          return obj;
        },
      },
      {
        title: '类别1', dataIndex: 'categories1',
        render: (value, row, index) => {
          const obj = { children: value, props: {}, };

          if (index === 0) { obj.props.rowSpan = 3; }
          if (index === 1) { obj.props.rowSpan = 0; }
          if (index === 2) { obj.props.rowSpan = 0; }

          if (index === 3) { obj.props.rowSpan = 3; }
          if (index === 4) { obj.props.rowSpan = 0; }
          if (index === 5) { obj.props.rowSpan = 0; }

          if (index === 6) { obj.props.rowSpan = 3; }
          if (index === 7) { obj.props.rowSpan = 0; }
          if (index === 8) { obj.props.rowSpan = 0; }
          return obj;
        },
      },
      { title: '类别1具体分类', dataIndex: 'categories1bchild', key: 'categories1bchild', },
      {
        title: '类别2', dataIndex: 'categories2',
        render: (value, row, index) => {
          const obj = { children: value, props: {}, };

          if (index === 0) { obj.props.rowSpan = 3; }
          if (index === 1) { obj.props.rowSpan = 0; }
          if (index === 2) { obj.props.rowSpan = 0; }

          if (index === 3) { obj.props.rowSpan = 3; }
          if (index === 4) { obj.props.rowSpan = 0; }
          if (index === 5) { obj.props.rowSpan = 0; }

          if (index === 6) { obj.props.rowSpan = 3; }
          if (index === 7) { obj.props.rowSpan = 0; }
          if (index === 8) { obj.props.rowSpan = 0; }
          return obj;
        },
      },
      { title: '类别2具体分类', dataIndex: 'categories2bchild', key: 'categories2bchild', },
    ];

    const element = <antd.Table dataSource={dataSource} bordered columns={columns} />;
    const root = document.getElementById('root')
    ReactDOM.render(
      element,
      root
    )
    // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
    var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
    // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
    var a = document.getElementsByTagName("a")[0];
    // 利用URL.createObjectURL()方法为a元素生成blob URL
    a.href = URL.createObjectURL(blob);
    // 设置文件名
    a.download = "学生成绩表.xls";
  </script>
</body>

</html>